<template>
  <div>
    <zm-panel :title="panelTitle" :visible.sync="value" @change="close">
      <zm-form label-width="100px" :model="form" :rules="formRule" ref="zmForm" size="small">
        <h3>账号信息</h3>
        <zm-form-item label="员工姓名" prop="realName">
          <el-input v-model="form.realName" :maxlength="20" clearable class="w320" placeholder="请输入员工姓名,不超过20个字" />
        </zm-form-item>
        <zm-form-item label="员工账号" prop="userName">
          <el-input v-model="form.userName" :maxlength="20" clearable class="w320" placeholder="请输入员工账号,建议为英文和数字组合" />
          <div>账号用于登录使用，只允许字母和数字，不区分大小写</div>
        </zm-form-item>
        <zm-form-item label="初始密码">
          <span>默认初始密码为123456</span>
        </zm-form-item>
        <zm-form-item label="手机号码" prop="mobile">
          <el-input v-model="form.mobile" :maxlength="20" clearable class="w320" placeholder="建议输入手机号" />
        </zm-form-item>
        <h3>部门权限</h3>
        <zm-form-item label="所属公司" prop="companyId">
          <zm-data-select v-model="form.companyId" @change="companyChange" label-name="companyName" value-key="companyId" api="getCompanyList" placeholder="请选择公司" class="w320 "></zm-data-select>
        </zm-form-item>
        <zm-form-item label="所属部门" prop="apartmentId" v-if="form.companyId && menuList.length">
          <tree-select @get-label="onTreeClick" v-model="form.apartmentId" :tree="menuList" :tree-props="{label:'name',valueKey:'value'}" placeholder="请选择部门" class="w320 "></tree-select>
        </zm-form-item>
        <zm-form-item label="所属岗位" prop="roleId">
          <zm-data-select v-model="form.roleId" api="roleList" class="w320" placeholder="请选择岗位"></zm-data-select>
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </zm-panel>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import { formRule } from '../const'
import systemAccountApis from '@/api/src/systemAccount'
import publicApis from '@/api/src/public'
import TreeSelect from '@/components/TreeSelect'
export default {
  components: { TreeSelect },
  mixins: [panelMixin],
  props: {
    rowInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        companyId: '',
        realName: '',
        userName: '',
        mobile: '',
        apartmentId: '',
        roleId: ''
      },
      formRule: formRule,
      // roleList: [],
      menuList: []
    }
  },
  computed: {
    panelTitle () {
      return this.rowInfo.id ? '编辑员工' : '新增员工'
    }
  },
  created () {
    // this.getTree()
    if (this.rowInfo.id) {
      this.getDetail()
    }
  },
  methods: {
    // async getRoleList() {
    //   this.roleList = []
    //   this.roleList = await systemAccountApis.roleList({
    //     apartmentId: this.form.apartmentId
    //   })
    // },
    async getTree () {
      const _res = await publicApis.apartmentList({companyId: this.form.companyId})
      this.menuList = _res
    },
    async getDetail () {
      const _res = await systemAccountApis.getInfo({ id: this.rowInfo.id })
      this.form = _res
      this.getTree()
      // this.getRoleList()
    },
    async submit () {
      let _valid = false
      this.$refs.zmForm.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      const params = JSON.parse(JSON.stringify(this.form))
      if (this.rowInfo.id) {
        params.id = this.rowInfo.id
        await systemAccountApis.update(params)
      } else {
        await systemAccountApis.create(params)
      }
      this.$message.success('操作成功')
      this.$emit('after-save')
      this.close()
    },
    companyChange() {
      this.menuList = []
      this.form.apartmentId = ''
      this.getTree()
    }
    // onTreeClick() {
    //   this.form.roleId = ''
    //   this.getRoleList()
    // }
  }

}
</script>

<style lang="scss">
</style>
